<template>
    <!-- 添加或修改菜单对话框 -->
    <el-dialog ref="elForm" :title="title" width="700px" :append-to-body="true"  @close="close" v-bind="$attrs" v-on="$listeners" :close-on-click-modal="false">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-form-item label="上级菜单">
                        <treeselect
                                v-model="form.parent"
                                :options="menuOptions"
                                :normalizer="normalizer"
                                :show-count="true"
                                placeholder="选择上级菜单"
                        />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-form-item label="菜单类型" prop="menuType">
                        <el-radio-group v-model="form.menuType">
                            <el-radio label="M">目录</el-radio>
                            <el-radio label="C">菜单</el-radio>
<!--                            <el-radio label="F">按钮</el-radio>-->
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item  label="菜单图标">
                        <el-popover
                                placement="bottom-start"
                                width="460"
                                trigger="click"
                                @show="$refs['iconSelect'].reset()"
                        >
                            <IconSelect ref="iconSelect" @selected="selected" />
                            <el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" clearable>
                                <svg-icon
                                        v-if="form.icon"
                                        slot="prefix"
                                        :icon-class="form.icon"
                                        class="el-input__icon"
                                        style="height: 32px;width: 16px;"
                                />
                                <i v-else slot="prefix" class="el-icon-search el-input__icon" />
                            </el-input>
                        </el-popover>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="显示排序" prop="no_order">
                        <el-input-number v-model="form.no_order" controls-position="right" :min="0" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="菜单名称" prop="name">
                        <el-input v-model="form.name" placeholder="请输入菜单名称" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item  label="路由地址" prop="web_path">
                        <el-input v-model="form.web_path" placeholder="请输入路由地址" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">

<!--                <el-col :span="12">-->
<!--                    <el-form-item  label="组件名称" prop="component_name">-->
<!--                        <el-input v-model="form.component_name" placeholder="请输入组件名称" />-->
<!--                    </el-form-item>-->
<!--                </el-col>-->
                <el-col :span="24" >
                    <el-form-item label="组件路径" prop="component" v-if="form.menuType == 'C'">
                        <el-input v-model="form.component" placeholder="请输入组件路径" />
                    </el-form-item>
                </el-col>
            </el-row>
<!--                <el-col :span="12">-->
<!--                    <el-form-item label="权限标识">-->
<!--                        <el-input v-model="form.menuPermission" placeholder="请输入权限标识" maxlength="100" />-->
<!--                    </el-form-item>-->
<!--                </el-col>-->
                <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item  label="是否外链" prop="is_link">
                        <el-radio-group v-model="form.is_link">
                            <el-radio :label="1">是</el-radio>
                            <el-radio :label="0">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item  label="显示状态">
                        <el-radio-group v-model="form.visible">
                            <el-radio :label="1" >是</el-radio>
                            <el-radio :label="0" >否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="菜单状态">
                        <el-radio-group v-model="form.status">
                            <el-radio :label="1" >正常</el-radio>
                            <el-radio :label="0" >停用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="手机菜单">
                        <el-radio-group v-model="form.is_mobile">
                            <el-radio :label="0">否</el-radio>
                            <el-radio :label="1">是</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <template v-if="form.is_mobile">
                    <el-col :span="12">
                        <el-form-item label="头部">
                            <el-radio-group v-model="form.head">
                                <el-radio :label="0">不显示</el-radio>
                                <el-radio :label="1">显示</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="尾部">
                            <el-radio-group v-model="form.foot">
                                <el-radio :label="0">不显示</el-radio>
                                <el-radio :label="1">显示</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="左箭头">
                            <el-radio-group v-model="form.left">
                                <el-radio :label="0">不显示</el-radio>
                                <el-radio :label="1">显示</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="右箭头">
                            <el-radio-group v-model="form.right">
                                <el-radio :label="0">不显示</el-radio>
                                <el-radio :label="1">显示</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="是否缓存">
                            <el-radio-group v-model="form.keepalive">
                                <el-radio :label="0">不缓存</el-radio>
                                <el-radio :label="1">缓存</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </template>
                <el-col :span="12">
                    <el-form-item label="背景颜色">
                        <el-input v-model="form.color" placeholder="如:blue,red,orange,yellow,purple" />
                    </el-form-item>
                </el-col>
            </el-row>
          <el-form-item label="图片">
            <my-upload-image v-model="form.pic"></my-upload-image>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="close">取 消</el-button>
        </div>
    </el-dialog>
</template>
<script>
    import Treeselect from "@riophae/vue-treeselect";
    import "@riophae/vue-treeselect/dist/vue-treeselect.css";
    import IconSelect from "@/components/IconSelect";
    import menu from "@/api/menuManagement/index";
    import { handleTree } from "@/utils/common";
    import MyUploadImage from '../../../../components/Common/MyUploadImage'
    export default {
        name:"eidtDialog",
        components: { MyUploadImage, Treeselect, IconSelect },
        inheritAttrs: false,
        props: {
            row: {
                type: Object,
                default: function() {
                    return {};
                }
            },
            menuList:{
                type:Array,
                default:function () {
                    return []
                }
            }
        },
        data() {
            return {
                form:{
                    id: undefined,
                    parent: "",
                    web_path:"",
                    name: undefined,
                    icon: undefined,
                    no_order: 0,
                    visible: 1,
                    status: 1,
                    is_link:0,
                    component:"",
                    component_name:"",
                    menuType:"M",
                    is_mobile:0,
                    head: 1, //是否展示头部
                    foot: 0,
                    left: 1, //是否显示左侧箭头
                    right: 0, //是否展示右侧按钮
                    keepalive:0,
                    color:"",
                    pic:""
                },
                // 菜单树选项
                menuOptions: [ { id: "", name: '主类目', children: [] }],
                // 表单校验
                rules: {
                    name: [
                        { required: true, message: "菜单名称不能为空", trigger: "blur" }
                    ],
                    order_no: [
                        { required: true, message: "菜单顺序不能为空", trigger: "blur" }
                    ],
                    web_path: [
                        { required: true, message: "路由地址不能为空", trigger: "blur" }
                    ],
                    component: [
                        { required: true, message: "组件路径不能为空", trigger: "blur" }
                    ]
                }
            }
        },
        computed: {
            title() {
                return this.row.id ? "修改菜单" : "新增菜单";
            }
        },
        created() {
            this.initFormData();
            this.getTreeselect();

        },
        mounted() {},
        methods: {
            initFormData() {
                for (let o in this.form) {
                    if(this.row[o]!=undefined){
                        this.form[o] = this.row[o];
                    }
                }
                if(this.form.component){
                    this.form.menuType = "C"
                }else {
                    this.form.menuType = "M"
                }
            },
            // 选择图标
            selected(name) {
                this.form.icon = name;
            },
            /** 查询菜单下拉树结构 */
            getTreeselect() {
                const menu = { id: "", name: '主类目', children: [] };
                this.menuOptions = [];
                menu.children = this.menuList
                this.menuOptions.push(menu)
            },
            onOpen() {},
            onClose() {
                this.$refs['elForm'].resetFields()
            },
            close() {
                this.$emit('update:visible', false)
            },
            handelConfirm() {
                this.$refs['elForm'].validate(valid => {
                    if (!valid) return
                    this.close()
                })
            },
            /** 转换菜单数据结构 */
            normalizer(node) {
                if (node.children && !node.children.length) {
                    delete node.children;
                }
                return {
                    id: node.id,
                    label: node.name,
                    children: node.children
                };
            },
            /** 提交按钮 */
            submitForm: function() {
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        if (this.form.id != undefined) {
                            menu.editMenu(this.form.id,this.form).then(response => {
                                this.msgSuccess("修改成功");
                                this.$emit("reloadList")
                                this.close()
                            });
                        } else {
                            menu.addMenu(this.form).then(response => {
                                this.msgSuccess("新增成功");
                                this.$emit("reloadList")
                                this.close()
                            });
                        }
                    }
                });
            },
        }
    }

</script>
<style>
</style>
